'use strict';

import {httpSeaFile} from "../js/http/httpSeaFile.js";
import {url_getPhoto} from "../js/http/httpConfig.js";

export let mainPage = {

    template: `
        <div>
            <div class="musicPlayer">
                <div class="titleArea signLine" style="display: flex">
               <div class="el-button" @click="backFunc()" style="margin-left: 30px;margin-right: 30px">后退</div>
               
               </div>
                <div class="mainArea signLine">
<!--                    <div class="mainPhoto signLine">-->
                    <div class="mainPhoto signLine" style="overflow-y: scroll">
                       <div v-for="value in photoList" class="photoCss signLineRoya" style="display: flex;justify-content: center;align-items: center">
                            <div v-if="value.IsDir" @click="getPhoto(value.Id)"
                            style="height: 90%;width: 90%;background: lavenderblush;display: flex;justify-content: center;align-items: center"
                            >{{value.FileName}}</div>

                           
<!--                            <div v-if="!value.IsDir"  v-bind:style="{ backgroundImage:'url('+value.FileUrl+')' }"></div>-->
                            
                            <el-image v-if="!value.IsDir" :src="value.FileUrl" fit="contain" :preview-src-list="calPhoto(value.FileUrl)">>
                              <div slot="placeholder" class="image-slot">
                                加载中<span class="dot">...</span>
                              </div>
                            </el-image>
                            
                          
                       </div>
                    </div>
                       
                        <!--                <div class="photoCss signLineRoya"></div>-->
                        <!--                <div class="photoCss signLineRoya"></div>-->
                        <!--                <div class="photoCss signLineRoya"></div>-->
                        <!--                <div class="photoCss signLineRoya"></div>-->
<!--                    </div>-->
                    <div class="mainInfo signLine"></div>
                </div>
            </div>
            
            <div class="bottomArea signLine"></div>

        </div>
    `,
    data: function () {
        return {
            test:"测试页",
            photoList:[],
            photoUrlList:[],
            //
            backInfoList:[],
        }
    },
    props: {},
    computed:{

    },
    methods: {
        // 返回按钮的逻辑
        backFunc(){

            if  (this.backInfoList.length>1){
                this.backInfoList=this.backInfoList.slice(0,-1)
                this.getPhoto(this.backInfoList[ this.backInfoList.length-1],true)
            }

        },
        // 根据照片路径，返回放大图片的列表
        calPhoto(value){
            let calNum=0;
            let photoList=[];
            for (let i =0 ;i<this.photoUrlList.length;i++){
                if (value===this.photoUrlList[i]){
                    calNum=i;
                    break
                }
            }
            for (let i=calNum;i<this.photoUrlList.length;i++){
                photoList.push(this.photoUrlList[i])
            }
            for (let i=0;i<calNum;i++){
                photoList.push(this.photoUrlList[i])
            }
            return photoList
        },
        // 获取图片
        getPhoto(Num,isBack){
            let postData ={
                dirID:Num.toString()
            };
            if (!isBack){
                this.backInfoList.push(Num)
            }
            let _this=this;
            httpSeaFile.post(url_getPhoto,postData,function (data) {
                _this.photoList=data;
                let phtoList=[];
                for (let value of data){
                    if (!value.IsDir){
                        phtoList.push(value.FileUrl)
                    }
                }
                _this.photoUrlList=phtoList;
                console.log("data",data)
            },function (errCode) {
                console.log("errCode",errCode)
            },function (netWorkErr) {
                console.log("netWorkErr",netWorkErr)
            })
        },
    },
    components: {},
    mounted: function () {
     console.log("测试文件");
        this.getPhoto(1)


    }


}